<template>
    <div :class="['btns', { isPosition: type == 0 }]">
        <span v-show="item.count > 0" @click="increment(item)">-</span>
        <b v-show="item.count > 0">{{ item.count }}</b>
        <span @click="add(item)" class="sp2">+</span>
    </div>
</template>
  
<script>
export default {
    // 接收父组件传递过来的item对象数据，和type字段
    props: ["item", "type"],
    methods: {
        add(food) {
            //点击按钮判断，该对象有没有count字段，没有的话，添加count字段，取值为1！
            if (!food.count) {
                food.count = 1;
            } else {
                food.count++;
            }
            // 操作mutation 把该food对象push到store中carList数组中
            this.$store.commit("setCarList", {
                item: food,
            });
        },
        increment(food) {
            food.count--;
        },
    },
};
</script>
  
<style  scoped>
.btns {
    display: flex;
}

.btns span {
    text-align: center;
    display: block;
    width: 20px;
    height: 20px;
    line-height:18px;
    border-radius: 50%;
    font-size:18px;
    text-align: center;
    font-weight: bold;
    color: rgb(0, 160, 220);
    border: 2px rgb(0, 160, 220) solid;

}

.btns .isPosition {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.btns .sp2{
    color: white;
    background-color:rgb(0, 160, 220) ;
}
b{
    font-weight: 200;
    padding: 2px;
}
</style>
  